記得這兩位朋友的分別代表的作用
props是React父元件與子元件間溝通的橋樑,是靜態(唯獨)的。
props與state主要的差別在於props是不可改變的
父元件App傳入子元件name屬性,value為joyce
import React, { Component } from 'react';
import Table from './Table'
class App extends Component {
render() {
return (
<Table name="joyce"/>
);
}
}
export default App;
子元件Table透過this.props取得由父元件傳入的name
就會印出joyce。
import React, { Component } from 'react';
class Table extends Component {
render() {
return (
<div className="Table">{this.props.name}</div>
);
}
}
export default Table;
state 主要作用是用元件保存、控制以及修改自己可變的狀態。state在元件內部初始化(給預設值),state狀態可以透過this.setState方法進行更新,setState會使元件重新渲染。
以下範例透過點擊li就可切換h3所顯示的狀態
class App extends Component {
constructor(props) { //若要使用這個方法
super(props) //必須先執行super(props),若有用到props的話會找不到this.props,沒用到props也可以只寫super()
this.state = {
currentPage: 'one', //給預設值
}
}
clickHandler = (e) => {
this.setState({ currentPage: e})
}
render () {
return (
<div>
<h3>{this.state.currentPage}</h3>
<ul>
<li onClick={()=>this.clickHandler('one')}>one</li>
<li onClick={()=>this.clickHandler('two')}>two</li>
</ul>
</div>
)
}
}
export default App;
class HelloWorld extends Component {
constructor() {
super()
}
sayHi = () => {
alert('Hello World')
}
render () {
return (
<div onClick={this.sayHi}>Hello World</div>
)
}
}
export default HelloWorld;
範例(二)改為無狀態元件(函數式的寫法)
const HelloWorld = (props) => {
const sayHi = (event) => alert('Hello World')
return (
<div onClick={sayHi}>Hello World</div>
)
}
export default HelloWorld;
通常一個元件是透過繼承Component來建構,一個子類就是一個元件。
而用函數的元件寫法:一個函數就是一個元件,可以和之前練習一樣,透過來使用該元件,兩者不同的是函數式元件只能接受props,無法像類元件一樣可以在constructor裡面初始化state。函數式元件(無狀態元件)就是一種只能接受props和提供render方法的類元件。
不好意思,路過剛好看到,發現 唯讀 打錯字
constructor(props) {
super(props)
}
另外有個地方一直不太明白,請問這段加進props
他做了什麼事?
謝謝
因為這樣React.Component建構子才能初始化this.props
謝謝。
後來有發現我的問題所在了,一開始把整個 component 跟 constructor 搞混了。
當時想說明明我不加這段也能在 component 裡面使用 this.props,所以一直搞不明白 。
不過後來都改使用 Hook ,也沒有這個問題了。